<template>
    <div id="map">
        <canvas ref="canvasRef"></canvas>
    </div>
</template>

<script setup>
    import {toContext} from "ol/render";
    import {Circle, Fill, Stroke, Style} from "ol/style";
    import {LineString, Point, Polygon} from "ol/geom";
    import {ref, onMounted} from 'vue';
    const canvasRef = ref(null);
    onMounted(() => {
       const render = toContext(canvasRef.value.getContext('2d'),{size: [100, 100]});
       console.log(render);

       const fill = new Fill({color: 'red'});
       const stroke = new Stroke({color: 'blue', width: 1});
       const style = new Style({fill, stroke,
         image: new Circle({
           radius: 10,
           fill: fill,
           stroke: stroke
         })});
      render.setStyle(style);
      // 绘制几何图形
      render.drawGeometry(
        new LineString([
          [10, 10],
          [90, 90],
        ])
      );
      render.drawGeometry(
        new Polygon([
          [
            [2, 2],
            [98, 2],
            [2, 98],
            [2, 2],
          ],
        ])
      );
      render.drawGeometry(new Point([88, 88]));
    })
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        z-index: 9999;
    }
</style>